<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="text" v-focus.color="'red'">
    </div>
</body>

</html>
<script src="vue.js"></script>
<script>
    // Vue.directive('focus',{
    //     //指令的钩子函数
    //     bind(){  
    //         console.log('绑定时触发')
    //     },
    //     inserted(el,bindings,vnode){
    //         //el 当前操作的元素 bindings指令的参数 vnode虚拟节点 
    //         //console.log("元素插入到页面时触发")
    //         //console.log(bindings)
    //         if(bindings.modifiers.color){
    //             el.style.background = bindings.value;
    //         }
    //         Vue.nextTick(function(){
    //             el.focus();
    //         })
    //     },
    //     update(){
    //         console.log("更新时触发")
    //     },
    //     unbind(){
    //         console.log('指令销毁时触发');
    //     }
    // })
    let vm = new Vue({
        el: '#app',
        data: {

        },
        directives: {
            "focus": {
                inserted(el, bindings, vnode) {
                    //el 当前操作的元素 bindings指令的参数 vnode虚拟节点 
                    //console.log("元素插入到页面时触发")
                    //console.log(bindings)
                    if (bindings.modifiers.color) {
                        el.style.background = bindings.value;
                    }
                    Vue.nextTick(function () {
                        el.focus();
                    })

                }
            }
        }

    })
</script>